//注册的动态js
//获取dom结构
let btn = document.querySelector('#btn')
let username = document.querySelector('#username')
let pwd = document.querySelector('#pwd')
let con = document.querySelector("#confirm")
let num = document.querySelector("#getNum")
let rem = document.querySelector("#rem")
let ran = document.querySelector('#ran')
let login = document.querySelector("#login")
//console.log(login)
//给注册按钮绑定单机事件
btn.onclick = function(e){
    e = e || window.event
    e.preventDefault();
    btn.style.opacity=1
    //首先输入框不能为空
if(!username.value || !pwd.value || !con.value){
    //alert('用户名、密码、验证码不能为空')
    layer.msg(
        '用户名、密码、验证码不能为空',
        {icon: 0,shade:[0.8, '#393D49'],time:3000},
      );
    return;
}
//用正则表达式限制用户名和密码输入格式
let reg1 = /^[a-zA-Z]\w{4,15}$/
if(!reg1.test(username.value)){
    //alert('用户名格式错误')
    layer.msg(
        '用户名格式错误',
        {icon: 2,shade:[0.8, '#393D49'],time:3000},
      );
    return;
}
let reg2 = /^\w{6,16}$/
if(!reg2.test(pwd.value)){
    //alert('密码格式错误')
    layer.msg(
        '密码格式错误',
        {icon: 2,shade:[0.8, '#393D49'],time:3000},
      );
    return;
}
if(!rem.checked){
    //alert('请勾选协议')
      //alert('请勾选小米用户协议')
      layer.msg(
        '请勾选小米用户协议',
        {icon: 0,shade:[0.8, '#393D49'],time:3000},
      );
    return;
}
if(con.value != ran.innerText){
    //alert('验证码错误')
    layer.msg(
        '验证码错误',
        {icon: 2,shade:[0.8, '#393D49'],time:3000},
      );
    return;
}
//发起ajax请求
ajax({
    url:'../php/getName.php',
    type:'get',
    dataType:'json',
    data:{
        username:username.value,
    },
    fn:function(res){
        if(res.status == 0){//说明用户名不可用
            //alert(res.msg)
            layer.msg(
                res.msg,
                {icon: 2,shade:[0.8, '#393D49'],time:3000},
              );
            return;  
        }else{  //此时再次通过ajax请求，将用户名和密码写入数据表
             ajax({
            url:'../php/register.php',
            type:'post',
            dataType:'json',
            data:{
                username:username.value,
                pwd:pwd.value,
            },
            fn:function(res){
                //alert(res.msg)
                layer.msg(
                    res.msg,
                    {icon: 1,shade:[0.8, '#393D49'],time:500},
                  );
                if(res.status == 1){
                    location.href = 'login.html';
                }
            }
        })}
       
    }
})
}
    num.onclick = function(e){
        e=e || window.event
        e.preventDefault();
        let arr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',0,1,2,3,4,5,6,7,8,9]
        //遍历arr,不需要
        //console.log(arr[12])
            ran.innerHTML=`${arr[randomNum(62)]}${arr[randomNum(62)]}${arr[randomNum(62)]}${arr[randomNum(62)]}`
        //console.log(randomNum(62))
    }

//封装随机数
function randomNum(num){
    return Math.floor(Math.random()*num)
}
//验证码输入框绑定表单失焦事件
// con.onblur=function(){
//     ran.innerText=''
// }
//给登录绑定事件
login.onclick = function(){
    location.href='../html/login.html'
}